import { Spin, Tooltip } from "@arco-design/web-react";
import { IconQuestionCircle } from "@arco-design/web-react/icon";
import React, { ReactNode, useState } from "react";
import { useEffect } from "react";
import styled from 'styled-components'

export interface IContentCard {
    id?: string;
    title: string | ReactNode;
    options?: any;
    style?: Record<string, string>;
    children?: any;
    tooltip?: {
        show?: boolean;
        content?: string;
        icon?: ReactNode;
    }
}

const Wrapper = styled.div`
    position: relative;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 0px 1px 1px rgba(154, 154, 154, 0.5);
    border-radius: 5px;
    padding: 14px;
    box-sizing: border-box;
    color: white;
    margin-bottom: 12px;

    .title {
        position: relative;
        width: 100%;
        height: 36px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-weight: bold;
        font-size: 16px;
        margin-bottom: 6px;
        padding-bottom: 6px;
    }

    .children {
        position: relative;
        width: 100%;
        height: calc(100% - 36px);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
`;

const ContentCard = (props: IContentCard) => {

    const { id, title, style, children, options, tooltip } = props;

    return (
        <Wrapper style={{...(style || {})}} id={id!}>
            <div className="title">
                <span>
                    {
                        tooltip?.show ?
                        <Tooltip content={tooltip?.content}>
                            {
                                tooltip?.icon ?? <IconQuestionCircle style={{ marginRight: '4px' }}/> 
                            }
                        </Tooltip> : null
                    }
                    { title }
                </span>
                { options }
            </div>
            <div className="children">
            { children ?? <Spin dot></Spin> }
            </div>
        </Wrapper>
    )
}


export default ContentCard;